<template>
  <div style="height:100%;width:100%;">
    <div class="barCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

<script>
export default {
  name: "bar",
  data() {
    return {
      pieData:[],
      area:'',
    }},
  props: {
    barData: {
      type: Array,
      default: () => {
        return {};
      }
    },
    areaName:{
      type:String,
    }
  },
  watch:{
      barData(val){
         console.log(val)
         this.getBar(val)
      },
  },
  // mounted() {
  //    this.getBar(this.pieData,this.area)
  // },
  methods: {
    getBar(pieData,area) {
      let dataList=[];
      pieData[0].map((item,index)=>{
         let obj={};
        obj['name'] = item.areaName
        obj['value'] = item.thisYearLj
        dataList.push(obj)
      })
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".barCanvas"));
      let option = {
           tooltip: {
                       trigger: 'item',
                       formatter: '{a} <br/>{b}: {c}万元',
                   },
        series: [
            {
                name: '区域',
                type: 'pie',
                selectedMode: 'single',
                hoverAnimation:false,
                radius: [0, '30%'],
                label: {
                    position: 'center',
                    color:'#000',
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: pieData[2].thisYearLj, name: pieData[1] +"\n"+ pieData[2].thisYearLj+'万元',
                    tooltip: {
                           show: false,
                       },
                    },

                ],
                 selectedMode:false,

                itemStyle: {
                   emphasis: {
                       shadowBlur: 10,
                       shadowOffsetX: 0,
                       shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                   normal:{
                       color:function(params) {
                       //自定义颜色
                       var colorList = [
                               '#fff'
                           ];
                           return colorList[params.dataIndex]
                        }
                   },
                   emphasis: {
                           color:"#fff",
                       }
                   },
                },
                 
            {
                name: '区域',
                type: 'pie',
                radius: ['40%', '55%'],
                label: {
                   show: false,
                   position: 'center'
                },
                data:dataList,

                itemStyle: {
                  emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                   },
                  normal:{
                      color:function(params) {
                      //自定义颜色
                      var colorList = [
                              '#7f92f7', '#7ba5f4', '#69bdfb', '#61d1eb','#53dda3',
                              '#29aa74', '#6edd53', '#9ef90c','#d2dd53', '#eadf55', '#f4c178',
                              '#f48892'
                          ];
                          return colorList[params.dataIndex]
                       }
                  }
               }




            }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>
